<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <main>
    <div class="myCardWarp">
      <div class="myCard">
        <van-row justify="space-between">
          <van-col>
            <van-row gutter="15" align="center">
              <van-col
                ><div class="name">{{ curStudent?.username }}</div></van-col
              >
              <van-col
                ><div class="class" style="margin-bottom: 8px">
                  {{ classFormat[curStudent?.class] }}
                </div></van-col
              >
              <van-col @click="toggle"
                ><van-icon name="friends-o" style="margin-bottom: 15px" size="27.5" color="#ffd6ac"
              /></van-col>
            </van-row>
          </van-col>
          <van-col>
            <div class="integral">
              <van-row align="center" gutter="5">
                <van-col>
                  <van-icon name="points" size="25" color="#fff" />
                </van-col>
                <van-col>
                  <div class="num">{{ thisCount.cont  }}</div>
                </van-col>
              </van-row>
            </div>
          </van-col>
        </van-row>

        <van-row justify="space-between" style="margin-top: 0.65rem">
          <van-col
            ><div class="time">有效期：{{ curStudent?.createtime }}</div></van-col
          >
        </van-row>

        <div style="" class="dp">
          <van-swipe :autoplay="3000" lazy-render height="150" loop style="border-radius: 15px">
            <van-swipe-item v-for="item in all.banner" :key="item.id">
              <img :src="item.banner" style="width: 100%; height: 100%" />
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
    </div>

    <main class="mainContainer">
      <van-row justify="space-between" style="margin-top: 50px" align="center" @click="giftBoxList">
        <van-col>
          <van-row gutter="5" style="padding: 0.5rem 0" align="center">
            <van-col><img src="../../assets/img/liwu.png" /></van-col>
            <van-col><h4>礼盒列表</h4></van-col>
          </van-row>
        </van-col>
        <van-col>更多<van-icon name="arrow" /></van-col>
      </van-row>

      <div class="jobs">
        <div v-for="item in all.list" :key="item.id" class="job" @click="handleClick(item)">
          <van-image :src="item.image" width="7rem" height="7rem" />
          <div class="title">{{ item.title }}</div>
          <div class="intr">{{ item.details }}</div>
          <van-button type="primary" text="购买" round class="btn" />
        </div>
      </div>


    </main>
  </main>
</template>

<script setup>
import { reactive } from 'vue'  // 导入reactive函数，从'vue'库中
import { useRouter } from 'vue-router'  // 导入useRouter函数，从'vue-router'库中
import { useIntegrallist } from '@/stores/integralList.js'  // 导入名为useIntegrallist的函数，从'@/stores/integralList.js'文件中
import { useUserInfoStore } from '@/stores/user.js'  // 导入名为useUserInfoStore的函数，从'@/stores/user.js'文件中
import { storeToRefs } from 'pinia'  // 导入storeToRefs函数，从'pinia'库中
import { closeToast, showLoadingToast} from 'vant'  // 导入closeToast和showLoadingToast函数，从'vant'库中
import { watch } from 'vue'  // 导入watch函数，从'vue'库中
import { baseURL, homeIndex } from '../../api'  // 导入baseURL和homeIndex函数，从'../../api'文件中

const userInfoStore = useUserInfoStore()  // 使用useUserInfoStore函数创建userInfoStore对象
const { loading, curStudent, classFormat, thisCount } = storeToRefs(userInfoStore)  // 使用storeToRefs函数将userInfoStore对象的loading、curStudent、classFormat和thisCount属性解构为响应式对象
const integrallist = useIntegrallist()  // 使用useIntegrallist函数创建integrallist对象


const all = reactive({  // 创建一个响应式对象all
  loading: true,  // 属性loading，初始值为true
  tabs: [{ name: `所有商品` }],  // 属性tabs，值为一个包含一个对象元素的数组
  list: []  // 属性list，初始值为空数组
})

;(async function () {  // 定义一个异步函数并立即调用
  try {
    all.loading = true  // 将all的loading属性设为true
    const res = await homeIndex()  // 调用homeIndex函数，并将返回结果赋值给res
    all.banner = res.banner.map((item) => {  // 将res的banner属性映射为一个新数组
      item.banner = baseURL + item.banner  // 将item的banner属性拼接baseURL，赋值给item.banner
      return item  // 返回item
    })
    all.list = res.list.map((item) => {  // 将res的list属性映射为一个新数组
      item.image = baseURL + item.image  // 将item的image属性拼接baseURL，赋值给item.image
      return item  // 返回item
    })
    all.loading = false  // 将all的loading属性设为false
  } catch (error) {
    all.loading = false  // 将all的loading属性设为false
  }
})()

watch(
  loading,
  (newLoading) => {
    if (newLoading) {
      showLoadingToast({
        message: '加载中...',
        forbidClick: true
      })
    } else {
      closeToast()
    }
  },
  { immediate: true }
)

const router = useRouter()  // 使用useRouter函数创建router对象

function giftBoxList() {  // 定义一个名为giftBoxList的函数
  router.push('/GiftBoxList')  // 跳转到'/GiftBoxList'路径
}

function handleClick(item) {  // 定义一个名为handleClick的函数，接受参数item
  integrallist.getCurGift(item)  // 调用integrallist对象的getCurGift方法，传入item
  router.push('/GiftBoxDetails')  // 跳转到'/GiftBoxDetails'路径
}

function toggle() {  // 定义一个名为toggle的函数
  router.push('/StudentProfile')  // 跳转到'/StudentProfile'路径
}

</script>

<style lang="less" scoped>
@var1: #4ec183;
@var2: #ffffff;
@var3: #fff4e3;
@var4: #df7d0d;
@var5: #fdb057;
.dp {
  position: absolute;
  top: 100px;
  width: 92%;
  margin-left: 4%;
  border-radius: 15px;
  left: 0%;
  height: 150px;
}
.myCardWarp {
  height: 20%;
  position: relative;
}
.myCard {
  background: linear-gradient(90deg, #ffb34d 0%, #ff8a25 100%);
  padding: 17.5px;
  padding-bottom: 110px;
  .class {
    background-color: @var1;
    color: @var2;
    margin: 1.5vh 1vw;
    font-size: 13px;
    font-weight: 600;
    padding: 0.2vh 2vw;
    border-radius: 15px;
  }
  .name {
    color: @var2;
    font-size: 18px;
    font-weight: bold;
  }
  .time {
    color: @var2;
  }
  .integral .num {
    color: @var2;
    font-weight: bold;
  }
}
.jobs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  flex-wrap: wrap;
  grid-column-gap: 15px;
  .job {
    background: @var3;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
    margin-bottom: 2vh;
    padding: 10px;
    box-sizing: border-box;
  }
}
.job .title {
  margin-top: 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  overflow: hidden;
  -webkit-box-orient: vertical;
  color: @var4;
}
.job .intr {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  overflow: hidden;
  -webkit-box-orient: vertical;
  color: @var5;
  font-size: 15px;
}
.job .btn {
  border-radius: 10px;
  height: 25px;
  width: 60px;
  margin: 0.6rem 0;
}
</style>
